<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
  <title>Document</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（@media）功能 -->
  <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
  <![endif]-->
  <style>
    img {
      width: 100%;
      height: 300px;
    }
    .taff-thumbnail img {
      width: 140px;
      height: 140px;
    }
    .taff-carousel {      /* 一般都是加自己定义的类进去，而不是直接修改已有类的属性 */
      margin-top: 50px;
      margin-bottom: 60px;
    }
    .taff-carousel,
    .taff-carousel .item {
      height: 500px;
      overflow: hidden;
    }
    .carousel-caption {     /* 覆盖原有样式 */
      bottom: 20px;  
    }
    .carousel-caption p {
      font-size: 20px;
      margin-bottom: 20px;
    }

    /* 规定小于768px则固定高度 */
    /* 
      媒体查询代码，表示只有在屏幕尺寸小于768像素的时候才会应用下面的样式
      利用@media screen实现网页布局的自适应
        优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。
          只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值
     */
    @media only screen and (max-width: 768px) {   
      .carousel-caption {
        bottom: 5%;
      }
      .taff-carousel,
      .taff-carousel .item {
        height: 300px;
      }
      .taff-carousel .item img {
        min-height: 300px;
      }
    }
    .taff-threeC {
      margin-top: 50px;
    }
    .taff-hr {
      margin: 35px auto 20px;
    }
    .taff-hr>hr {
      height: 1px;
      border-color: #ccc;
    }
    .tab-content {
      padding-top: 30px;
      padding-bottom: 20px;
    }
    .tab-pane h1 {
      margin-top: 100px;
    }
    .tab-pane img {
      width: 350px;
      height: 350px;
    }
    .taff-footer {
      margin-bottom: 50px;
    }
  </style>
</head>
<body>
   <!-- 导航 -->
   <nav class="navbar navbar-inverse navbar-fixed-top">      <!-- 组件->导航条->反色的导航条    fixed的导航栏-->
    <div class="container">                 <!-- 改为固定容器 --> 
      <div class="navbar-header">
        <!-- 移动端按钮 -->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">现代浏览器博物馆</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">综述 <span class="sr-only">(current)</span></a></li>
          <li><a href="#summary-container">简述</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">特点 <span class="caret"></span></a>
            <ul class="dropdown-menu" id="taff-nav">
              <!-- 为5个a都绑定点击功能 -->
              <li><a href="#chrome">chrome</a></li>
              <li><a href="#firefox">firefox</a></li>
              <li><a href="#opera">opera</a></li>
              <li><a href="#safari">safari</a></li>
              <li><a href="#ie">ie</a></li>
            </ul>
          </li>
          <li><a href="javascript:;" data-target="#myModal" data-toggle="modal">关于</a></li>   <!-- 给a绑定一个模态框 -->
        </ul>
      </div>
    </div>
  </nav>

  <!-- 轮播图 -->
  <!-- 中文3-》javascript-》carousel -->
  <div id="carousel-example-generic" class="carousel slide taff-carousel" data-ride="carousel"  data-interval="2000">     <!-- data-相关的都是js的标识位 -->
    <!-- 小圆点指标 -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      <li data-target="#carousel-example-generic" data-slide-to="3"></li>
      <li data-target="#carousel-example-generic" data-slide-to="4"></li>
    </ol>
    <!-- 轮播图 -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="img/chrome-big.jpg">
        <div class="carousel-caption">
          <h1>chrome</h1>
          <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
          <p><a href="#" class="btn btn-lg btn-primary" role="button">点我下载</a></p>
        </div>
      </div>
      <div class="item">
        <img src="img/firefox-big.jpg">
        <div class="carousel-caption">
          <h1>firefox</h1>
          <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>
          <p><a href="#" class="btn btn-lg btn-primary" role="button">点我下载</a></p>
        </div>
      </div>
      <div class="item">
        <img src="img/safari-big.jpg">
        <div class="carousel-caption">
          <h1>safari</h1>
          <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
          <p><a href="#" class="btn btn-lg btn-primary" role="button">点我下载</a></p>
        </div>
      </div>
      <div class="item">
        <img src="img/opera-big.jpg">
        <div class="carousel-caption">
          <h1>opera</h1>
          <p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p>
          <p><a href="#" class="btn btn-lg btn-primary" role="button">点我下载</a></p>
        </div>
      </div>
      <div class="item">
        <img src="img/ie-big.jpg">
        <div class="carousel-caption">
          <h1>ie</h1>
          <p>Internet Explorer，简称 IE，是微软公司推出的一款网页浏览器。</p>
          <p><a href="#" class="btn btn-lg btn-primary" role="button">点我下载</a></p>
        </div>
      </div>
    </div>
    <!-- 左右按钮 -->    <!-- gly开头的是字体图标 -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <!-- 三列布局 -->
  <div class="container taff-threeC">      <!-- 添加自己的类，来 -->
    <div class="row" id="summary-container">
      <div class="col-md-4 taff-thumbnail text-center">     <!-- 添加自己的类，来防止响应式缩放 -->
        <!-- 到组件里去找缩略图 -->
          <img src="img/chrome-logo-small.jpg">
          <div class="caption">
            <h1>chrome</h1>
            <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
            <p><a href="#" class="btn btn-default" role="button">点我下载</a></p>
          </div>
      </div>
      <div class="col-md-4 taff-thumbnail text-center">     <!-- 添加自己的类，来防止响应式缩放 -->
          <img src="img/firefox-logo-small.jpg">
          <div class="caption">
            <h1>firefox</h1>
            <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>
            <p><a href="#" class="btn btn-default" role="button">点我下载</a></p>
          </div>
      </div>
      <div class="col-md-4 taff-thumbnail text-center">     <!-- 添加自己的类，来防止响应式缩放 -->
          <img src="img/safari-logo-small.jpg">
          <div class="caption">
            <h1>safari</h1>
            <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
            <p><a href="#" class="btn btn-default" role="button">点我下载</a></p>
          </div>
      </div>
    </div>
  </div>

  <!-- 线 -->
  <div class="container taff-hr">
    <hr />          <!-- 放在容器里就不会占满宽度了 -->
  </div>

  <!-- js插件->标签页 -->
  <div class="container" id="taff-tab">     <!-- 也放到容器里  起个名字来跳转位置时用 -->
    <!-- 导航标签 -->
    <ul class="nav nav-tabs" role="tablist" id="taff-list">
      <li role="presentation" class="active"><a href="#chrome" aria-controls="chrome" role="tab" data-toggle="tab">chrome</a></li>
      <li role="presentation"><a href="#firefox" aria-controls="firefox" role="tab" data-toggle="tab">firefox</a></li>
      <li role="presentation"><a href="#opera" aria-controls="opera" role="tab" data-toggle="tab">opera</a></li>
      <li role="presentation"><a href="#safari" aria-controls="safari" role="tab" data-toggle="tab">safari</a></li>
      <li role="presentation"><a href="#ie" aria-controls="ie" role="tab" data-toggle="tab">ie</a></li>
    </ul>
    <!-- 标签面板 -->
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="chrome">     <!-- id跟ul里li里的a的aria-controls有关，href也有对应 -->
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-7">
              <h1>chrome</h1>
              <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。 该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</p>
            </div>
            <div class="col-md-5">
              <img src="img/chrome-logo.jpg" alt="">
            </div>
          </div>
        </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="firefox">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-5">
              <img src="img/firefox-logo.jpg" alt="">
            </div>
            <div class="col-md-7">
              <h1>firefox</h1>
              <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器， 使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。</p>
            </div>
          </div>
        </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="opera">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-7">
              <h1>opera</h1>
              <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。 Safari在2003年1月7日首度发行测试版，并成为Mac OS X v10.3与之后的默认浏览器，也是iPhone与IPAD和iPod touch的指定浏览器。</p>
            </div>
            <div class="col-md-5">
              <img src="img/opera-logo.jpg" alt="">
            </div>
          </div>
        </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="safari">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-5">
              <img src="img/safari-logo.jpg" alt="">
            </div>
            <div class="col-md-7">
              <h1>safari</h1>
              <p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。 是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。.</p>
            </div>
          </div>
        </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="ie">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-7">
              <h1>ie</h1>
              <p>Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident</p>
            </div>
            <div class="col-md-5">
              <img src="img/ie-logo.jpg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 版权 -->
  <div class="container taff-footer">
    &copy;版权符号
  </div>

  <!-- 模态框 -->
  <div class="modal fade" tabindex="-1" role="dialog" id="myModal">   <!-- id只想关于的data-target -->
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">提示</h4>
        </div>
        <div class="modal-body">
          <p>太难了&hellip;</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">了解了</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
<script src="js/jQuery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
  $(function() {
    //在官网的用法介绍中，可以data-interval=""来设置间隔暂停等，也可以下面
    $('.carousel').carousel({
      interval: 2000,           //设置间隔
      wrap: true       //5之后回到1
    })
    $('#taff-nav > li > a').click(function(e) {
      var href = $(this).attr("href");
      $('#taff-list > li > a[href="'+(href)+'"]').tab('show');
      //console.log('#taff-list > li > a[href="'+(href)+'"]');
      $(document).scrollTop($("#taff-tab").offset().top);
      e.preventDefault();
    })
  })
</script>